<template>
	<!-- #ifdef MP-WEIXIN -->
	<uv-navbar
	  :fixed="false"
	  :title="title"
	  left-arrow
	  @leftClick="$onClickLeft"
	/>
	<!-- #endif -->
	<view style="padding-bottom: 120rpx;">
		<view class="card">
			<view class="user flex content-center justify-between">
				<view class="left flex content-center ">
					<image :src="detail.appUserInfoRespVO ? detail.appUserInfoRespVO.avatar ? detail.appUserInfoRespVO.avatar : '/static/images/mine/default.png' : '/static/images/mine/default.png'" mode="aspectFill"></image>
					<view class="" style="line-height: 64rpx;">
						{{detail.appUserInfoRespVO ? detail.appUserInfoRespVO.nickname : '此用已注销'}}
					</view>
				</view>
				<view class="right">
					<view class="iconfont-yshop icon-mobile"  @click="makePhoneCall(detail.userPhone)" style="font-size: 45rpx;margin-right: 40rpx;"></view>
				</view>
			</view>

		</view>

		<view class="order_details">
			<view class="card_one flex justify-between content-center "  v-if="detail.orderType != 'due'">
				<view class="" v-if="detail.orderType == 'desk'">
					桌号：{{detail.deskNumber}}
				</view>
				<view class="left" v-else>
					取餐号：{{detail.numberId}}
				</view>

				<view class="right">
					<text>{{detail.statusDto.title}}</text>
				</view>
			</view>
			<view class="card_two flex justify-between content-center" >
				<view class="left">配送方式：</view>
				<view class="right"  v-if="detail.orderType == 'takein'">自取</view>
				<view class="right" v-if="detail.orderType == 'takeout'">外卖</view>
				<view class="right" v-if="detail.orderType == 'desk'">堂食</view>
				<view class="right" v-if="detail.orderType == 'due'">预约</view>
			</view>
			<view class="card_three">
				<view class="item flex justify-between content-center" style="border-bottom: 1rpx solid #EBEBEB;">
					<view class="left">
						下单时间：
					</view>
					<view class="right">
						{{formatDateTime(detail.createTime)}}
					</view>
				</view>
				<view class="item flex justify-between content-center">
					<view class="left">
						订单编号：
					</view>
					<view class="right">
						{{detail.orderId}}
					</view>
				</view>

			</view>


			
			
			<view class="card_four" v-if="detail.orderType != 'due'">
				<view class="title">
					商品明细
				</view>
				<view class="" v-if="detail.orderType == 'desk'">
					<view style="text-align: center;color: #f56c6c;margin-top: 10rpx;" v-for="(n,k) in num + 1" :key="k">
						 <text v-if="n > 1" style="">
							第{{ n - 1 }}次加菜
						  </text>
						  <text v-else style="">
							首次点菜
						  </text>
					
						<view class="shop flex content-center" v-for="(cart,k) in detail.cartInfo" :key="k">
							<block v-if="cart.addProductMark == (n-1)">
								<image :src="cart.image" mode="aspectFill"></image>
								<view class="shop_item">
									<view class="flex justify-between  one">
										<view class="">{{cart.title}}</view>
										<view class="">¥{{cart.price}}</view>
									</view>
									<view class="two">
										{{cart.spec}}
									</view>
									<view class="three">
										×{{cart.number}}
									</view>
								</view>
							</block>
						</view>
					</view>
				</view>
				<view class="" v-else>
					<view class="shop flex content-center" v-for="(cart,k) in detail.cartInfo" :key="k">
							<image :src="cart.image" mode="aspectFill"></image>
							<view class="shop_item">
								<view class="flex justify-between  one">
									<view class="">{{cart.title}}</view>
									<view class="">¥{{cart.price}}</view>
								</view>
								<view class="two">
									{{cart.spec}}
								</view>
								<view class="three">
									×{{cart.number}}
								</view>
							</view>
					</view>
				</view>
			</view>
			<view class="card_four" v-else>
				<view class="title">
					预约餐桌
				</view>
				<view class="">
					<view class="shop flex content-center">
							<image :src="detail.appShopDeskVO.image" mode="aspectFill"></image>
							<view class="shop_item">
								<view class="flex justify-between  one">
									<view class="">{{detail.appShopDeskVO.title}}</view>
									<view class="">¥0.00</view>
								</view>
								<view class="two">
									桌号:{{ detail.appShopDeskVO.number }}
								</view>
								<view class="three">
									×1
								</view>
							</view>
					</view>
				</view>
			</view>

			<view class="flex justify-between card_five">
				<view class="left">备注：</view>
				<view class="right">{{detail.remark ||'无'}}</view>
			</view>

			<view class="card_three" v-if="detail.orderType != 'due'">
				<view class="item1 flex justify-between content-center" style="border-bottom: 1rpx solid #EBEBEB;">
					<view class="flex content-center left">
						<image class="quna" src="/static/images/merchant/coupon.png" mode=""></image>抵用券：
					</view>
					<view class="right">
						-￥{{detail.couponPrice}}
					</view>
				</view>
				<view class="item1 flex justify-between content-center">
					<view class="one">
						共计：
					</view>
					<view class="right">
						<text class="two" >已优惠￥{{detail.couponPrice}}</text><text
							class="thr">￥{{detail.payPrice}}</text>
					</view>
				</view>
			</view>
			<view class="card_three" v-else>
				<view class="item1 flex justify-between content-center">
					<view class="one">
						预约人：
					</view>
					<view class="right" style="color: black;">
					  {{detail.realName}}
					</view>
				</view>
				<view class="item1 flex justify-between content-center">
					<view class="one">
						预约时间：
					</view>
					<view class="right" style="color: black;">
					  {{formatDateTime(detail.dueTime)}}
					</view>
				</view>
				<view class="item1 flex justify-between content-center">
					<view class="one">
						到达时间：
					</view>
					<view class="right" style="color: black;">
					  {{detail.reachTime}}
					</view>
				</view>
				<view class="item1 flex justify-between content-center">
					<view class="one">
						预约桌号：
					</view>
					<view class="right" style="color: black;">
					  {{detail.deskNumber}}
					</view>
				</view>
				<view class="item1 flex justify-between content-center">
					<view class="one">
						预留电话：
					</view>
					<view class="right" style="color: black;">
					  {{detail.userPhone}}
					</view>
				</view>
			</view>
			<view class="card_two flex justify-between content-center" v-if="detail.orderType != 'due'">
				<view class="left">
					支付方式:
				</view>
				<view class="right">
					{{detail.statusDto.payType}}
				</view>
			</view>
		</view>
		<view class="fixed flex content-center" v-if="detail.dueStatus == 1">
			<view class="btn" @click="cancelDueOrder(detail.id)">
				取消预约
			</view>
		</view>
		<view class="fixed flex content-center" v-if="detail.statusDto.type == 2">
			<view class="btn" @click="doTake(detail.id)">
				后台收货
			</view>
		</view>
		<view class="fixed flex content-center" v-if="detail.statusDto.type == -1">
			<view class="btn" @click="refund(detail.id)">
				同意退款
			</view>
		</view>
		<view class="fixed flex justify-between content-center" v-if="detail.statusDto.type == 1">
			<view class="btn" @click="doSend(detail.id)">
				出单
			</view>
		</view>
	</view>
</template>

<script setup>
import {
  ref
} from 'vue'
import {
	orderDetail
} from '@/api/merchant'
import {
  cancelDue
} from '@/api/order'
import { onLoad} from '@dcloudio/uni-app'
import { formatDateTime } from '@/utils/util'

const title = ref('订单详情')
const detail = ref({statusDto:{}})
const num = ref(0)

onLoad((e) => {
	goDetail(e.id)
})

const goDetail = async(id) => {
	let res = await orderDetail({id:id})
	if(res){
		detail.value = res
		num.value = res.cartInfo[res.cartInfo.length - 1].addProductMark
	}
}

const makePhoneCall = (mobile) =>{
	uni.makePhoneCall({
		phoneNumber: mobile,
		fail(res) {
		}
	})
}


const cancelDueOrder = async(id) => {
	let data = await cancelDue({id:id});
	if (data) {
		goDetail(id)
	}
}

//出单
const doSend = async(id) => {
	let res = await orderSend({id:id})
	if(res){
		goDetail(id)
	}
}

//收货
const doTake = async(id) => {
	let res = await orderTake({id:id})
	if(res){
		goDetail(id)
	}
}

//退款
const refund = (id) => {
	uni.showModal({
		title: '提示',
		content: '确定要退款？',
		success: async function (res) {
			if (res.confirm) {
				let res1 =  await orderRefund({id:id})
				if(res1){
					goDetail(id)
				}
			} else if (res.cancel) {
			}
		}
	});
	
}

</script>

<style lang="scss">

	.fixed {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;

		.btn {
			width: 750rpx;
			height: 120rpx;
			background: #09b4f1;
			text-align: center;
			line-height: 120rpx;
			color: #fff;
			font-size: 28rpx;
		}
	}

	.card {
		width: 100vw;
		background-color: #fff;
		padding: 25rpx 34rpx;
		box-sizing: border-box;

		.black {
			font-size: 32rpx;
			color: #333333;
		}

		.orange {
			width: 520rpx;
			font-size: 30rpx;
			color: #FF9C2E;
		}

		.user {

			.left {
				image {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					margin-right: 20rpx;
				}

				font-size: 32rpx;
				color: #333333;
			}

			.right {
				image {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
				}
			}


		}
	}

	.order_details {
		padding: 25rpx 25rpx 200rpx;

		.card_one {
			background: #FFFFFF;
			border-radius: 10rpx;
			padding: 20rpx 30rpx;

			.left {
				font-size: 40rpx;
				color: #333333;
			}

			.right {
				font-size: 34rpx;
				color: #FF9C2E;
				line-height: 50rpx;
			}
		}

		.card_two {
			background: #FFFFFF;
			border-radius: 10rpx;
			padding: 20rpx 30rpx;
			margin: 20rpx 0;

			.left {
				font-size: 32rpx;
				color: #333333;
			}

			.right {
				font-size: 32rpx;
				color: #333333;
			}
		}

		.card_three {
			background: #FFFFFF;
			border-radius: 10rpx;
			padding: 14rpx 30rpx;
			margin: 20rpx 0;

			.item1 {
				padding: 20rpx 0;
				box-sizing: border-box;
				text-align: center;

				.quna {
					width: 35rpx;
					height: 35rpx;
					margin-right: 12rpx;
				}

				.left {
					font-size: 24rpx;
					color: #333333;
				}

				.right {
					font-size: 34rpx;
					color: #FB2A57;
				}

				.one {
					font-size: 30rpx;
					color: #333333;
				}

				.two {
					font-size: 24rpx;
					color: #777777;
				}

				.thr {
					font-size: 42rpx;
					color: #333333;
				}
			}

			.item {
				height: 80rpx;
				line-height: 80rpx;

				.left {
					font-size: 30rpx;
					color: #333333;
				}

				.right {
					font-size: 32rpx;
					color: #333333;
				}
			}

		}

		.card_four {
			background: #FFFFFF;
			border-radius: 10rpx;
			padding: 24rpx 30rpx;
			margin: 20rpx 0;

			.title {
				font-size: 32rpx;
				border-bottom: 1rpx solid #F2F2F2;
				color: #232323;
				padding: 0 0 12rpx;
				box-sizing: border-box;


			}


			.shop {
				margin: 20rpx 0;

				image {
					width: 122rpx;
					height: 120rpx;
					border-radius: 10rpx;
					margin-right: 20rpx;
				}

				.shop_item {
					width: 500rpx;

					.one {
						font-size: 28rpx;
						color: #333333;
					}

					.two {
						font-size: 24rpx;
						color: #777777;
						margin: 6rpx 0;
					}

					.three {
						font-size: 24rpx;
						color: #777777;
					}
				}
			}
		}

		.card_five {
			background: #FFFFFF;
			border-radius: 10rpx;
			padding: 14rpx 30rpx;
			margin: 20rpx 0;
			font-size: 32rpx;
			color: #333333;

			.right {
				width: 530rpx;
			}

		}

	}

</style>